<template>
  <div>
    <!-- 头部导航
    fixed 可以让头部div带固定定位样式
     -->
    <div>
      <van-nav-bar fixed>
        <!-- v-slot:left 具名插槽就等于 #left -->
        <template #left>
          <img class="logo" src="@/assets/logo.png" alt="" />
        </template>
        <template #right>
          <!-- 坑：postcss只能翻译style里css样式代码,标签内行内样式它无法转换px转rem,
              所以需要自己手动计算 18 / 37.5 = 0.48 -->
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn" />
        </template>
      </van-nav-bar>
    </div>

    <!-- tab栏导航
    v-model:关联的激活项的下标(双向绑定) -->
    <div class="main">
      <van-tabs v-model="channelId" @change="channelChangeFn" animated sticky offset-top="1.226667rem">
        <van-tab v-for="item in userChannelList" :key="item.id" :title="item.name" :name="item.id">
          <ArticleList :channelId="channelId"></ArticleList>
        </van-tab>
      </van-tabs>

      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn" />
    </div>

    <!-- 频道管理的弹出层 -->
    <van-popup class="channel_popup" v-model="show" get-container="body">
      <ChannelEdit
      :userList="userChannelList"
      :unCheckList="unCheckChanneList"
      @addChannelEV="addChannelFn"
      @removeChannelEV="removeChannelFn"
      @closeEV="closeFn"
      ref="editRef"
      v-model="channelId"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, removeTheChannelAPI } from '@/api/index'
import ArticleList from './components/ArticleList'
import ChannelEdit from './ChannelEdit'

export default {
  name: 'Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      // tab导航-激活频道ID (默认频道ID为0，页面刚打开是推荐频道高亮-对应文章数据)
      channelId: 0,
      // 用户选择的频道列表
      userChannelList: [],
      // 所有频道的列表
      allChannelList: [],
      // 频道弹出层的显示/隐藏
      show: false,
      // 保存每个频道的滚动位置
      // 构思: {推荐频道ID：滚动距离, html频道ID：自己的滚动距离}
      channelScrollTObj: {}
    }
  },
  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    // console.log(res)
    this.userChannelList = res.data.data.channels

    // 所有频道的列表
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
  },
  methods: {
    // tabs切换的事件 -> 获取文章列表数据
    async channelChangeFn () {
      // tabs切换后,设置滚动条的位置
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
      })
    },
    // + 号的点击方法
    plusClickFn () {
      this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      // 数组转换为对象,推荐频道不能传递
      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 拷贝(浅拷贝)
        delete newObj.name
        newObj.seq = index

        // 让map方法把新对象收集起来形成一个新数组
        return newObj
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)

      // 删除接口返回状态码204(Not Content)  无返回内容
      await removeTheChannelAPI({
        channelId: channelObj.id
      })
      // console.log(res)
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
      // 让内部的编辑状态回归false
      this.$refs.editRef.isEdit = false
    },
    // 首页-右上角的放大镜点击事件 -> 跳转到搜索页面
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      // 同时保存当前频道的滚动距离
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop
    }
  },
  // 计算属性
  computed: {
    // 把所有频道的数组挨个对象取出，去用户已选频道的数组里查找，如果找不到，则让filter方法收集到一个新的数组里
    unCheckChanneList () {
      const newArr = this.allChannelList.filter(bigObj => {
        const index = this.userChannelList.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })
        // 如果找到了
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  activated () {
    // console.log(this.$route)
    window.addEventListener('scroll', this.scrollFn)
    // window和document, 监听网页滚动的事件
    // html标签获取scrollTop,滚动的距离,和设置滚动的位置
    // 立刻设置，滚动调位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }
  // 前提:组件缓存，切走了就是失去激活生命周期方法触发
  // 无组件缓存，被切走了，destroyed销毁生命周期方法
  // 每个页面都有自己独立的 路由规则对象
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 999;
}
.channel_popup{
  width: 100vw;
  height: 100vh;
}
</style>
